<template>
  <div class="login-page">
    <el-card class="login-panel">
      <el-form
        :model="loginFormData"
        label-position="left"
        :rules="rules"
        class="container-form"
        ref="loginForm"
      >
        <el-form-item prop="username" class="form-item">
          <span class="label">账号:</span>
          <el-input
            type="text"
            v-model.trim="loginFormData.username"
            placeholder="请输入新增帐号"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>

        <el-form-item
          prop="password"
          style="margin-top: 40px"
          class="form-item"
        >
          <span class="label">密码:</span>
          <el-input
            type="password"
            v-model.trim="loginFormData.password"
            placeholder="请输入新增账号的密码"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>

        <el-form-item label="选择角色:" style="margin-top: 40px">
          <el-radio-group v-model="loginFormData.role">
            <el-radio label="1">超级管理员</el-radio>
            <el-radio label="2">普通管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="submitForm('loginForm')"
        class="login-btn"
        >新增</el-button
      >
    </el-card>
  </div>
</template>

<script>
import md5 from "js-md5"
export default {
  name: "login",
  props: {
    msg: String
  },
  data() {
    return {
      salt: "afeu$%#SDCV*YG)87ygv87403pgh-t%^(&)U_{$^DSXC*",
      loginFormData: {
        username: "",
        password: "",
        role: "1"
      },
      rules: {
        username: [
          { required: true, message: "请输入新增管理员账号", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入新增管理员密码", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    //注册接口
    async registered() {
      let that = this
      let newPassword = md5(this.loginFormData.password + that.salt)
      let params = {
        username: this.loginFormData.username,
        password: newPassword,
        role: this.loginFormData.role
      }
      try {
        await that.$http.get("/manager/newManager", params)
        this.$message({
          message: "新建管理员成功",
          type: "success"
        })
      } catch (err) {
        console.log("报错了：", err)
      }
    },

    //上传表单
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate(valid => {
        if (valid) {
          that.registered()
        } else {
          console.log("error submit!!")
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container-form {
  .label {
    margin-right: 20px;
  }
  /deep/ .el-input {
    width: auto;
  }
  /deep/ .el-input__inner {
    width: 300px;
  }
  /deep/ .el-form-item__error {
    margin-left: 50px;
  }
}
.login-btn {
  background: $themeColor;
}
</style>
